<template>
  <div class="box">
    <div class="top">
      <h2>我的</h2>
      <div @click="logOut"><span>退出登录</span><van-icon name="arrow" /></div>
    </div>
    <div class="user" @click="goLogin">
      <van-image
        round
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div>
        <h3>{{ username }}</h3>
        <span>购物愉快 ~</span>
      </div>
    </div>

    <router-link :to="{ name: 'order' }">
      <van-row justify="space-between">
        <van-col> <van-icon name="orders-o" /> 商品订单</van-col>
        <van-col>
          <span><span class="more">查看更多></span></span>
        </van-col>
      </van-row>
    </router-link>

    <div class="tab">
      <router-link :to="{ name: 'obligationorder' }">
        <span><van-icon name="balance-pay" /></span>
        <span>待付款</span>
      </router-link>

      <router-link :to="{ name: 'awaitorder' }">
        <span><van-icon name="logistics" /></span>
        <span>待发货</span>
      </router-link>

      <router-link :to="{ name: 'receivingorder' }">
        <span><van-icon name="shop-o" /></span>
        <span>待收货</span>
      </router-link>

      <router-link :to="{ name: 'finishorder' }">
        <span><van-icon name="shop-collect-o" /></span>
        <span>已完成</span>
      </router-link>
    </div>

    <router-link :to="{ name: 'footprint' }">
      <van-row justify="space-between">
        <van-col><span>我的足迹</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'location' }">
      <van-row justify="space-between">
        <van-col><span>我的地址</span></van-col>
        <van-col
          ><span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'aftersale' }">
      <van-row justify="space-between">
        <van-col><span>我的售后</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'contactus' }">
      <van-row justify="space-between">
        <van-col><span>联系客服</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'personalinformation' }">
      <van-row justify="space-between">
        <van-col><span>个人信息</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'changepwd' }">
      <van-row justify="space-between">
        <van-col><span>修改密码</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>

    <router-link :to="{ name: 'aboutus' }">
      <van-row justify="space-between">
        <van-col><span>关于我们</span></van-col>
        <van-col>
          <span><van-icon name="arrow" /></span>
        </van-col>
      </van-row>
    </router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { showSuccessToast } from "vant";
import { showConfirmDialog } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();

// 获取用户名
const username = ref("TC_ZY");
const userName = localStorage.getItem("username");

// 退出登录
function logOut() {
  // 判断有没有登录
  if (localStorage.getItem("token")) {
    showConfirmDialog({
      title: "退出登录",
      message: "你确定要退出登录吗? o(╥﹏╥)o",
    })
      .then(() => {
        localStorage.removeItem("token");
        localStorage.removeItem("username");
        if (localStorage.getItem("username") === null) {
          username.value = "TC_ZY";
        }

        showSuccessToast("退出成功");
      })
      .catch(() => {});
  } else {
    showConfirmDialog({
      title: "请先登录",
      message: "你还没有登录,需要跳转到登录页吗?(*^▽^*)",
    })
      .then(() => {
        router.push({
          path: "/login",
        });
      })
      .catch(() => {});
  }
}

// 登录
function goLogin() {
  // 判断有没有登录
  if (localStorage.getItem("token")) {
    showConfirmDialog({
      title: "请不要重复登录",
    })
      .then(() => {})
      .catch(() => {});
  } else {
    showConfirmDialog({
      title: "请先登录",
      message: "你还没有登录,需要跳转到登录页吗?(*^▽^*)",
    })
      .then(() => {
        router.push({
          path: "/login",
        });
      })
      .catch(() => {});
  }
}

if (userName) {
  username.value = userName;
}
</script>

<style lang="less" scoped>
.box {
  padding: 6.4vw 4vw 0;
  .top {
    display: flex;
    justify-content: space-between;
    h2 {
      color: #000;
      font-weight: 700;
      margin-bottom: 6.4vw;
    }
    div {
      font-size: 2.133vw;
      padding-top: 2.5vw;
      span {
        font-size: 3.6vw;
        margin-right: 1vw;
      }
    }
  }
  .user {
    height: 15vw;
    background-color: #333;
    color: #fff;
    border-radius: 1.333vw;
    margin-bottom: 6.667vw;
    .van-image {
      width: 8.533vw;
      height: 8.533vw;
      float: left;
      margin: 2.933vw 2.933vw 0 3.467vw;
    }
    div {
      line-height: 1;
      overflow: hidden;
      h3 {
        margin-top: 3.6vw;
        margin-bottom: 1.6vw;
        font-size: 4vw;
      }
      span {
        display: block;
        font-size: 1.6vw;
        color: rgb(222, 218, 218);
      }
    }
  }
  .van-row {
    height: 10vw;
    border-bottom: 0.267vw solid #e4e4e4;
    background-color: #fff;
    overflow: hidden;
    .van-col {
      // width: 100%;
      line-height: 1;
      font-size: 2.4vw;
      margin-top: 3vw;
      color: #000;
      .more {
        font-size: 1.6vw;
        color: #999;
      }
      :deep(.van-icon) {
        color: #999;
      }
    }
    .van-icon-orders-o {
      font-size: 4vw;
      margin-right: 2vw;
    }
  }
  .tab {
    height: 17.867vw;
    display: flex;
    justify-content: space-around;
    text-align: center;
    line-height: 1;

    span {
      display: block;
      margin-top: 3.2vw;
      font-size: 2.4vw;
      color: #000;
      .van-icon {
        font-size: 4.5vw;
      }
    }
  }
}
</style>
